/*
 * @Description: 单个列表组件（包含收藏按钮、切换线路按钮）
 * @Author: buwei.huang
 * @Date: 2019-06-17 15:24:30
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-06-17 15:25:09
 */
<template>
  <div
    class="station_item flex-h flex-hsb flex-vc"
    @click="goToRoute"
  >
    <div class="item_left">
      <p class="fontsize28 item_font1">{{busName}}</p>
      <p class="fontsize22 item_font2">开往<span>{{endName}}</span></p>
    </div>
    <div class="item_right flex-h flex-vc">
      <p
        class="fontsize50"
        :class="typeof nowBusStop != 'number'? 'nowBusStopFont' : ''"
      >
        {{nowBusStop}}<span
          class="fontsize24"
          v-if="typeof nowBusStop == 'number'"
        >站</span>
      </p>
      <i
        class="icon iconfont icon-shoucang1"
        :class="isCollect ? 'isCollect' :''"
        @click.stop="onCollect"
      />
      <span></span>
      <i
        class="icon1 iconfont icon-revesing baseColorNoAcitve"
        @click.stop="onChangeRoute"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: null
    },
    index: {
      type: Number,
      default: null
    }
  },
  computed: {
    busName() {
      return this.returnModel('busName')
    },
    endName() {
      return this.returnModel('busEndtStation')
    },
    nowBusStop() {
      return this.nowBusStopSwitch(this.returnModel('nowBusStop'))
    },
    isCollect() {
      return this.returnModel('isCollect')
    }
  },
  methods: {
    returnModel(model) {
      if (!this.item.showDown) {
        return this.item.upBusesInfoModel[model]
      } else {
        return this.item.downBusesInfoModel[model]
      }
    },
    nowBusStopSwitch(nowBusStop) {
      switch (nowBusStop) {
        case 0:
          return '即将到站'
        case -1:
          return '暂无车辆信息'
        case -99:
          return '已经到站'
        default:
          return nowBusStop
      }
    },
    // 切换线路
    onChangeRoute() {
      this.$emit('onChangeRoute', this.item, this.index)
    },
    // 点击收藏
    onCollect() {
      this.$emit('onCollect', this.item)
    },
    // 跳转线路
    goToRoute() {
      let params = {
        name: this.returnModel('busName'),
        id: this.returnModel('subRouteId'),
        type: this.returnModel('type')
      }
      let paramsStr = 'BUS_DIRECTION=' + params.type + '&NAME=' + params.name + '&ID=' + params.id
      this.$emit('goToRoute', paramsStr)
    }
  }
}
</script>
<style>
.station_item {
  height: 130px;
  padding-left: 40px;
}
.item_right {
  height: 100%;
}
.item_right .icon {
  color: #dddddd;
  font-size: 25px; /* no */
  padding: 30px 30px 30px 40px;
}
.item_right .icon1 {
  margin-left: 30px;
  font-size: 25px; /* no */
  font-weight: bold;
  padding: 30px 30px 30px 0;
}
.item_font1 {
  line-height: 40px;
  color: #333;
  margin-bottom: 14px;
}
.item_font2 {
  color: #ccc;
  line-height: 30px;
}
.item_font2 span:first-of-type {
  margin-left: 10px;
}
.item_right p:first-of-type {
  color: #333333;
}
.item_right > span:first-of-type {
  width: 2px;
  height: 50px;
  background-color: #d8d8d8;
}
.station_list_main .item_right .isCollect {
  color: #ff9938;
}
.station_list_main .item_right .iconRevesingColor {
  color: #dddddd;
}
.item_right .nowBusStopFont {
  font-size: 12px; /* no */
}
</style>
